<template>
	<div class="userInfo">
		<SRV-topbar  title="小黄人急救：个人资料"></SRV-topbar>
		<div class="line">
			<label>头像</label>
			<view class="right">
			<SRV-profile :potos="userInfo.memberInfo.head_portrait" :topicon="userInfo.memberInfo.topicon" :srvhour="userInfo.memberInfo.total_time" size="160"></SRV-profile>
			</view>
		</div>
		<div class="line">
			<label>姓名</label>
			<view class="right"><input type="text" value="userInfo.username" placeholder-class="placeholder" v-model="username" /></view>
		</div>
		<div class="line">
			<label>手机号码</label>
			<view class="right"><label>{{userInfo.mobile}}</label></view>
		</div>
		<div class="line uni-list">
			<label>性别</label>
			<view class="right uni-list-cell">
				<view class="uni-list-cell-left">
					<picker @change="bindPickerChange" :value="userInfo.gender" :range="genderList" range-key="itemName">
						{{userInfo.gender_name}}
					</picker> 
				</view>
				<!-- <view class="uni-list-cell-db">

				</view> -->
			</view>
		</div>
		<div class="line">
			<label>生日</label>
			<view class="right">
				<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					{{userInfo.birthday ? userInfo.birthday : "请选择"}}
				</picker>
			</view>
		</div>
		<button @click="save()">保存</button>
	</div>
</template>
<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				userInfo: {},
				username: '',
				gender: '',
				genderList: [
					{
						itemId: 0,
						itemName: '保密'
					}, {
						itemId: 1,
						itemName: '男'
					}, {
						itemId: 2,
						itemName: '女'
					},
				],
				birthday: '',
			}
		},
		computed: {
		        startDate() {
					console.info(this.getDate('start'));
		            return this.getDate('start');
		        },
		        endDate() {
					console.info(this.getDate('end'));
		            return this.getDate('end');
		        }
		},
		methods: {
			save() {
				if (this.username == "") {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none',
					})
					return;
				}
				serve
					.request({
						url: '/member/member/edit-info',
						data: {
							username: this.username,
							gender: this.gender,
							birthday: this.birthday,
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
						}
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
						if (res.code == 200) {
							common.jump('my');
						}
					});
			},
			getUserInfo() {
				serve
					.request({
						url: '/member/member/index',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							'local-city': uni.getStorageSync('localCity'),
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.userInfo = res.data;
							this.username = res.data.username;
							this.mobile = res.data.mobile;
							this.gender = res.data.gender;
							this.birthday = res.data.birthday;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							})
						}
					});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			},
			bindPickerChange: function(e) {
				this.gender = this.genderList[e.detail.value].itemId;
				this.userInfo.gender_name = this.genderList[e.detail.value].itemName;
			},
			bindDateChange: function(e) {
				this.birthday = e.target.value;
				this.userInfo.birthday = e.target.value;
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
		
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
		},
		onLoad() {
			this.getUserInfo();
		},
	}
</script>
<style lang="scss" scoped>
	.userInfo {
		.left {
			width: 25%;
		}

		.right {
			display: flex;
			position: relative;
			width: 70%;
			margin-right: 20upx;
			flex: 1;

			image {
				width: 144upx;
				height: 144upx;
				margin-right: 20upx;
				border-radius: 50%;
			}

			label {
				text-align: right;
				width: 100%;
			}
			input {
				width: 100%;
				text-align: right;
			}
		}

		.line {
			position: relative;
			display: flex;
			box-sizing: border-box;
			padding: 45upx 33upx 38upx;
			align-items: center;
			font-size: 32upx;
			border-bottom: 1upx rgba(53, 63, 110, 0.06) solid;
		}

		.line::after {
			position: absolute;
			right: 33upx;
			top: 65upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		button {
			width: 640upx;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			background: rgba(255, 200, 10, 1);
			border-radius: 50upx;
			display: block;
			margin: 160upx auto 116upx;
			font-size: 32upx;

			&::after {
				border: none;
			}
		}

	}
</style>
